﻿<template>
    <div class="busGoodAttribute-container">
        <el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
                <el-row :gutter="35">
                    <el-form-item v-show="false">
                        <el-input v-model="ruleForm.id" />
                    </el-form-item>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商品编码" prop="goodCode">
                            <el-select clearable filterable v-model="ruleForm.goodCode" placeholder="请选择商品编码"  @change="changebad">
                                <el-option v-for="(item,index) in busGoodsDropdownList" :key="index" :value="item.value" :label="item.label" />

                            </el-select>

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="属性值" prop="aValue">
                            <el-select clearable filterable v-model="ruleForm.aValue" placeholder="请选择属性值">
                                <el-option v-for="(item,index) in BusGoodsAttributeDropdownValueList" :key="index" :value="item.value" :label="item.label" />

                            </el-select>
                            
                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="属性名" prop="aName">
                            <el-select clearable filterable v-model="ruleForm.aName" placeholder="请选择属性名" @change="getBusGoodsAttributeDropdownValue">
                                <el-option v-for="(item,index) in busAttributeDropdownList" :key="index" :value="item.value" :label="item.label" />

                            </el-select>

                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from "vue";
    import { ElMessage } from "element-plus";
    import type { FormRules } from "element-plus";
    import { addBusGoodAttribute, updateBusGoodAttribute } from "/@/api/main/busGoodAttribute";
    import { getBusGoodsDropdown, getBusAttributeDropdownF,BusGoodsAttributeDropdownValue } from '/@/api/main/busGoodAttribute';
    import { getDictDataList } from '/@/api/system/admin';
    const getEditisDeleteData = ref<any>([]);
    //父级传递来的参数
    var props = defineProps({
        title: {
            type: String,
            default: "",
        },
    });
    //父级传递来的函数，用于回调
    const emit = defineEmits(["reloadTable"]);
    const ruleFormRef = ref();
    const isShowDialog = ref(false);
    const ruleForm = ref<any>({});
    //自行添加其他规则
    const rules = ref<FormRules>({
    });

    // 打开弹窗
    const openDialog = (row: any) => {
        ruleForm.value = JSON.parse(JSON.stringify(row));
        isShowDialog.value = true;
    };

    // 关闭弹窗
    const closeDialog = () => {
        emit("reloadTable");
        isShowDialog.value = false;
    };

    // 取消
    const cancel = () => {
        isShowDialog.value = false;
    };

    // 提交
    const submit = async () => {
        ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
            if (isValid) {
                let values = ruleForm.value;
                if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
                    await updateBusGoodAttribute(values);
                } else {
                    await addBusGoodAttribute(values);
                }
                closeDialog();
            } else {
                ElMessage({
                    message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
                    type: "error",
                });
            }
        });
    };

    const dictTypeDataList = async (val: any) => {
        let list = await getDictDataList(val);
        return list.data.result ?? [];
    };

    const busGoodsDropdownList = ref<any>([]);
    const getBusGoodsDropdownList = async () => {
        let list = await getBusGoodsDropdown();
        busGoodsDropdownList.value = list.data.result ?? [];
        
    };
    getBusGoodsDropdownList();

    const busAttributeDropdownList = ref<any>([]);
    const getBusAttributeDropdownList = async (value:any) => {
        let list = await getBusAttributeDropdownF({ p1: value });
        busAttributeDropdownList.value = list.data.result ?? [];
    };
    
    const changebad = async (value:any) => {
        getBusAttributeDropdownList(value);
    }
    const BusGoodsAttributeDropdownValueList = ref<any>([]);
    const getBusGoodsAttributeDropdownValue = async (value: any) => {
        let list = await BusGoodsAttributeDropdownValue({ p1: value });
        BusGoodsAttributeDropdownValueList.value = list.data.result ?? [];
    }
    // 页面加载时
    onMounted(async () => {
        getEditisDeleteData.value = await dictTypeDataList('data_yes_no');
    });

    //将属性或者函数暴露给父组件
    defineExpose({ openDialog });
</script>




